<template>
    <div>
        <Row>
            <Col span="16" style="margin-left:200px">
                <Row>
                    <Col span="2"><Icon type="search" size="40"></Icon></Col>
                    <Col span="22"><h1>精确检索</h1></Col>
                </Row>
                <br>
                <div class="searchdiv">
                    <!--搜索框-->
                    <Row>
                        <Col span="4">
                            <Dropdown trigger="click" style="margin-left:7px" @on-click="gettitle">
                                <a href="javascript:void(0)">
                                    <Button type="primary" size="large">
                                        {{title}}
                                        <Icon type="arrow-down-b"></Icon>
                                    </Button>
                                </a>
                                <DropdownMenu slot="list">
                                    <DropdownItem name="通知资讯">通知资讯</DropdownItem>
                                    <DropdownItem name="服务查找">服务查找</DropdownItem>
                                    <DropdownItem name="需求查找">需求查找</DropdownItem>
                                    <DropdownItem name="企业机构">企业机构</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                        </Col>
                        <Col span="16">
                            <Input v-model="searchitem" size="large"></Input>
                        </Col>
                        <Col span="4">
                            <Button type="primary" size="large" @click="handleSearch">搜索</Button>
                        </Col>
                    </Row>
                    <!--News条件下显示内容-->
                    <div v-if="news" style="margin-top:20px;font-size:16px">
                        <Row type="flex" justify="center" align="middle">
                            <Col span="3">通知类别：</Col>
                            <Col span="5">
                                <Select v-model="article.ptype">
                                    <Option value="0" key="0">所有类型</Option>
                                    <Option value="notice" key="notice">通知公告</Option>
                                    <Option value="news" key="news">新闻资讯</Option>
                                    <Option value="laws" key="laws">政策法规</Option>
                                </Select>
                            </Col>
                            <Col span="3">详细类别：</Col>
                            <Col span="5">
                                <Select v-model="article.atype">
                                    <Option value="0" key="0">所有类型</Option>
                                    <Option v-for="item in atypelist" :value="item.name" :key="item.value">{{ item.name }}</Option>
                                </Select>
                            </Col>
                            <Col span="2">时间：</Col>
                            <Col span="6">
                                <Select v-model="article.time" clearable placeholder="请选择时间段">
                                    <Option value="0" key="0">全部时间</Option>
                                    <Option value="3" key="3">三天内</Option>
                                    <Option value="7" key="7">一周内</Option>
                                    <Option value="30" key="30">一个月内</Option>
                                    <Option value="90" key="90">三个月内</Option>
                                </Select>
                            </Col>
                        </Row>
                    </div>
                    <!--service条件下显示内容-->
                    <div v-if="service" style="margin-top:20px;font-size:16px">
                        <Row>
                            <RadioGroup v-model="serviceModel.type" style="font-size:16px">
                                服务类型：
                                <Radio label="0" style="font-size:16px">
                                    <span>所有类型</span>
                                </Radio>
                                <Radio v-for="item in servicetypelist" :label="item.name" style="font-size:16px">
                                    <span>{{item.name}}</span>
                                </Radio>
                            </RadioGroup>
                        </Row>
                        <Row>
                            <Col span="2">时间：</Col>
                            <Col span="5">
                                
                                <Select v-model="serviceModel.time" clearable placeholder="请选择时间段">
                                    <Option value="0" key="0">全部时间</Option>
                                    <Option value="3" key="3">三天内</Option>
                                    <Option value="7" key="7">一周内</Option>
                                    <Option value="30" key="30">一个月内</Option>
                                    <Option value="90" key="90">三个月内</Option>
                                </Select>
                            </Col>
                        </Row>
                    </div>
                    <!--demand条件下显示内容-->
                    <div v-if="demand" style="margin-top:20px;font-size:16px">
                        <Row>
                            <RadioGroup v-model="demandModel.type" style="font-size:16px">
                                需求类型：
                                <Radio label="0" style="font-size:16px">
                                    <span>所有类型</span>
                                </Radio>
                                <Radio v-for="item in demandtypelist" :label="item.name" style="font-size:16px">
                                    <span>{{item.name}}</span>
                                </Radio>
                            </RadioGroup>
                        </Row>
                        <Row>
                            <Col span="2">地区：</Col>
                            <Col span="15">
                                <al-selector v-model="demandModel.cities" data-type="name" level="2"/>
                            </Col>
                            <!-- <Col span="5">
                                <div>
                                    <Select v-model="demandModel.cities[0]" placeholder="请选择省份">
                                        <Option v-for="item in citiesList" :value="item.name" :key="item.name">{{item.name}}</Option>
                                    </Select>
                                </div>
                            </Col>
                            <Col span="5">
                                <div>
                                    <Select v-model="demandModel.cities[1]" placeholder="请选择城市">
                                        <Option v-for="item in demand_city_list" :value="item.name" :key="item.name" >{{item.name}}</Option>
                                    </Select>
                                </div>
                            </Col>
                            <Col span="5">
                                <div>
                                    <Select v-model="demandModel.cities[2]" placeholder="请选择区县">
                                        <Option v-for="item in demand_area_list" :value="item.name" :key="item.name" >{{item.name}}</Option>
                                    </Select>
                                </div>
                            </Col> -->
                            <Col span="2">时间：</Col>
                            <Col span="5">
                                
                                <Select v-model="demandModel.time" clearable placeholder="请选择时间段">
                                    <Option value="0" key="0">全部时间</Option>
                                    <Option value="3" key="3">三天内</Option>
                                    <Option value="7" key="7">一周内</Option>
                                    <Option value="30" key="30">一个月内</Option>
                                    <Option value="90" key="90">三个月内</Option>
                                </Select>
                            </Col>
                        </Row>
                    </div>
                    <!--company条件显示内容-->
                    <div v-if="company" style="margin-top:20px;font-size:16px">
                        <Row>
                            <RadioGroup v-model="companyModel.role_type" style="font-size:16px">
                                需求类型：
                                <Radio label="0" style="font-size:16px">
                                    <span>所有类型</span>
                                </Radio>
                                <Radio label="4" style="font-size:16px">
                                    <span>企业搜索</span>
                                </Radio>
                                <Radio label="5" style="font-size:16px">
                                    <span>机构搜索</span>
                                </Radio>
                                <Radio label="3" style="font-size:16px">
                                    <span>个人用户</span>
                                </Radio>
                            </RadioGroup>
                        </Row>
                        <Row>
                            <Col span="4">
                                <span>类别：</span>
                            </Col>
                            <Col span="4">
                                <Select v-model="companyModel.member_type">
                                    <Option value="*" label="全部类型"></Option>
                                    <Option :value="item.name" v-for="item in memberTypeList" :key="item.name">{{item.name}}</Option>
                                </Select>
                            </col>
                            <Col span="4">所在地区：</Col>
                            <Col span="12">
                                <al-selector v-model="companyModel.cities" data-type="name" level="2"/>
                            </Col>
                            <!--ivew组件实现地区级联选择-->
                            <!-- <Col span="8"><al-cascader v-model="companyModel.cities" level="2"/></Col> -->
                            <!--下方为使用数据字典中的数据实现地区级联选择，当前使用的时ivew自带组件-->
                            <!-- <Col span="4">
                                <div>
                                    <Select v-model="companyModel.cities[0]" placeholder="请选择省份">
                                        <Option v-for="item in citiesList" :value="item.name" :key="item.name">{{item.name}}</Option>
                                    </Select>
                                </div>
                            </Col>
                            <Col span="4" style="margin-left:10px">
                                <div>
                                    <Select v-model="companyModel.cities[1]" placeholder="请选择城市">
                                        <Option v-for="item in company_city_list" :value="item.name" :key="item.name" >{{item.name}}</Option>
                                    </Select>
                                </div>
                            </Col>
                            <Col span="4" style="margin-left:10px">
                                <div>
                                    <Select v-model="companyModel.cities[2]" placeholder="请选择区县">
                                        <Option v-for="item in company_area_list" :value="item.name" :key="item.name" >{{item.name}}</Option>
                                    </Select>
                                </div>
                            </Col> -->
                        </Row>
                    </div>
                </div>
            </Col>
        </Row>
        
    </div>
</template>
<script>
import iviewArea from 'iview-area';
//import AreaAlterMultSelector from "../../../member/views/main-components/area-alter-mult-selector";
import Vue from 'vue';
Vue.use(iviewArea);
export default {
    data(){
        return{
            res_s: [],
            companyModel:{
                role_type:'0',
                member_type:'',
                cities:[]
            },
            serviceModel:{
                type:'0',
                cities:[],
                time:'0'
            },
            demandModel:{
                type:'0',
                cities:[],
                time:'0'
            },
            article:{
                ptype:'0',
                atype:'0',
                time:'0'
            },
            title:'通知资讯',
            searchitem:'',
            news:true,
            service:false,
            demand:false,
            company:false,
            serviceagency:false,
            searchitem:'',
        }
    },
    methods:{
        gettitle(name){
            this.title=name;
            switch(name){
                case '通知资讯':{
                    this.news=true;
                    this.service=false;
                    this.demand=false;
                    this.company=false;
                    this.serviceagency=false;
                    break;
                }
                case '服务查找':{
                    this.news=false;
                    this.service=true;
                    this.demand=false;
                    this.company=false;
                    this.serviceagency=false;
                    break;
                }
                case '需求查找':{
                    this.news=false;
                    this.service=false;
                    this.demand=true;
                    this.company=false;
                    this.serviceagency=false;
                    break;
                }
                case '企业机构':{
                    this.news=false;
                    this.service=false;
                    this.demand=false;
                    this.company=true;
                    this.serviceagency=false;
                    break;
                }
                

            }
        },
        handleSearch(){
            switch(this.title){
                case '通知资讯':this.$router.push({name:"find_article",query: {ptype:this.article.ptype,atype:this.article.atype,time:this.article.time,searchitem:this.searchitem} });break;
                case '服务查找':this.$router.push({name:"find_service",query: {type:this.serviceModel.type,cities:this.serviceModel.cities,time:this.serviceModel.time,searchitem:this.searchitem} });break;
                case '需求查找':this.$router.push({name:"find_demand",query: {type:this.demandModel.type,cities:this.demandModel.cities,time:this.demandModel.time,searchitem:this.searchitem} });break;
                case '企业机构':this.$router.push({name:"find_agen_com",query: {rtype:this.companyModel.role_type,cities:this.companyModel.cities,mtype:this.companyModel.member_type,searchitem:this.searchitem} });break;
            }
        },
    },
    computed:{
        dicTree(){
            return this.$store.state.app.dicTree;
        },
        atypelist(){
            switch(this.article.ptype){
                case 'news': return this.dicTree.news.children;
                case 'notice': return this.dicTree.notice.children;
                case 'laws' : return this.dicTree.laws.children;
                default: return [];
            }
        },
        citiesList(){
            return this.dicTree.area.children;
        },
        service_city_list(){
            for(var i=0;i<this.citiesList.length;i++){
                if(this.citiesList[i].name==this.serviceModel.cities[0]){
                    return this.citiesList[i].children;
                }
            }
            return [];
        },
        service_area_list(){
            for(var i=0;i<this.service_city_list.length;i++){
                if(this.service_city_list[i].name==this.serviceModel.cities[1]){
                    return this.service_city_list[i].children;
                }
            }
        },
        demand_city_list(){
            for(var i=0;i<this.citiesList.length;i++){
                if(this.citiesList[i].name==this.demandModel.cities[0]){
                    return this.citiesList[i].children;
                }
            }
            return [];
        },
        demand_area_list(){
            for(var i=0;i<this.demand_city_list.length;i++){
                if(this.demand_city_list[i].name==this.demandModel.cities[1]){
                    return this.demand_city_list[i].children;
                }
            }
        },
        company_city_list(){
            for(var i=0;i<this.citiesList.length;i++){
                if(this.citiesList[i].name==this.companyModel.cities[0]){
                    return this.citiesList[i].children;
                }
            }
            return [];
        },
        company_area_list(){
            for(var i=0;i<this.company_city_list.length;i++){
                if(this.company_city_list[i].name==this.companyModel.cities[1]){
                    return this.company_city_list[i].children;
                }
            }
        },
        servicetypelist(){
            return this.dicTree.service.children;
        },
        demandtypelist(){
            return this.dicTree.demand.children;
        },
        memberTypeList(){
            if(this.companyModel.role_type == 4){
                return this.$store.state.app.dicTree.company_type.children;
            }else if(this.companyModel.role_type == 5){
                return this.$store.state.app.dicTree.service_agency.children;
            }
        }
    }
}
</script>
<style>
.searchdiv{
    /* border:1px solid #dcdcdc;
    background:#f2f2f2;  */
}
</style>


